<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="pic-list">
	<div class="close">【关闭】</div>
	<ul>
		<c:forEach items="${page.list }" var="towel">
			<li><img src="images/thum_${towel.image }" width=90
			height=90 data="images/${towel.image }"
			title="${towel.name }" /></li>
		</c:forEach>
	</ul>
	<div class="img-page">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="pic-show">
		<img alt="" src="images/${page.list[imgIndex].image }" imgIndex="${imgIndex }"/>
		<h3>${page.list[imgIndex].name }</h3>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		var d=$('.pic-show img').attr('imgIndex'),img=$('.pic-list li img'),num=$('.pic-list li').length;
		img.click(function(){
			var src=$(this).attr('data'),title = $(this).attr('title');
			$('.pic-list ul li').removeClass('corent');
			$(this).parent().addClass('corent');
			$('.pic-show').find('img,h3,br').remove();
			$('.pic-show').append("<img src='"+src+"'><br /><h3>"+title+"</h3>");
			d=$(this).parent().index();
		});	
		$('.img-page .right').click(function(){
			d++;
			if(d>=num) d=0;
			var corent=$('.pic-list ul li').eq(d).find('img'),left_x=corent.parent().position().left;
			var src = corent.attr('data'),title = corent.attr('title');
			$('.pic-list ul li').removeClass('corent');
			corent.parent().addClass('corent');
			$('.pic-show').find('img,h3,br').remove();
			$('.pic-show').append("<img src='"+src+"'><br /><h3>"+title+"</h3>");
			corent.parent().parent().animate({left:-(left_x-345)});
		});
		$('.img-page .left').click(function(){
			d--;
			if(d<0) d=num-1;
			var corent=$('.pic-list ul li').eq(d).find('img'),left_x=corent.parent().position().left;
			var src = corent.attr('data'),title = corent.attr('title');
			$('.pic-list ul li').removeClass('corent');
			corent.parent().addClass('corent');
			$('.pic-show').find('img,h3,br').remove();
			$('.pic-show').append("<img src='"+src+"'><br /><h3>"+title+"</h3>");
			corent.parent().parent().animate({left:-(left_x-345)});		
		});
		$('.close').click(function(){
			//$('#dialog').html().remove();
			$(this).parent().hide();
			$('.ui-widget-overlay').hide();
		});
		
	});
</script> 
